<template>
	<view>
		<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item class="swiper-item" v-for="item in list.imgs" :key="item">
				<image class="image" :src="item" mode=""></image>
			</swiper-item>
		</swiper>
		<view class="center">
			<view @click="buling" class="xingxing">
				<image src="../../../../static/icons/collect.png" mode=""></image>
			</view>

			<view class="text">
				{{list.detail_title}}
			</view>
			<view class="text">
				{{list.detail_desc}}
			</view>
			<view class="text">
				¥{{list.price_now/100}}
			</view>
			<rich-text class="eat" :nodes="list.content"></rich-text>
		</view>

		<view class="under">

			<image src="../../../../static/icons/kf.png" mode=""></image> <br>
			<text>客服</text>
			<button type="primary" plain="true" @click="addbuy">立即购买</button>
			<view class="car" @click="addcart">
				购物车
			</view>
		</view>
		<sku class="shopdetal" :list="list" @childEvents="closesku" v-show="show==1"></sku>

	</view>
</template>

<script>
	import IndexApi from '@/api/index/index.js'
	import
	sku
	from '@/components/zujian/zujian.vue'
	export default {
		name:'detal',
		components: {
			sku
		},
		data() {

			return {
				productId: '',
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				list: {
					type:'',
					},
				show: '2'


			};
		},
		methods: {
			scroll: function(e) {

				this.old.scrollTop = e.detail.scrollTop
			},
			buling() {
				uni.showToast({
					title: '已收藏',
					duration: 2000
				});
			},
			//添加购物车
			addcart() {
				this.list.type='1'
				this.show = 1
			},
			//下单购买
			addbuy() {
				this.list.type='2'
				this.show = 1
			},
			closesku() {
				this.show = 2
			},
			getlist() {
				IndexApi.productdetail({
					productId: this.productId
				}).then((res) => {
					console.log(res)
					this.list = res.data.data
					if (res.data.data.imgs) {
						this.list.imgs = res.data.data.imgs.split(',');
					}

				})
			}
		},
		onLoad(option) {
			this.productId = option.productId
			this.getlist()
		}
	}
</script>

<style lang="scss">
	page{
		background: #f0ebe6;
	}
	.swiper {
		height: 600rpx;
		width: 100%;
	}

	.swiper-item {
		height: 600rpx;
		width: 100%;

		image {
			height: 600rpx;
			width: 100%;
		}

	}

	.center {
		background: #f0ebe6;
		overflow: hidden;
		position: relative;

		.text {
			margin-left: 50rpx;
			margin-top: 30rpx;
		}

		:nth-child(3) {
			font-size: 30.8rpx;
			color: #B0B0B0;
		}
	}

	.xingxing {
		background: #354e44;
		height: 100rpx;
		width: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;

		margin-left: 600rpx;

		z-index: 999;

		image {
			z-index: 999;
			width: 44rpx;
			height: 44rpx;
		}
	}

	.eat {
		margin: 0 auto;
		margin-top: 100rpx;
		width: 80%;
		background: #f0ebe6;
		margin-left: 50rpx;

		:nth-child(1) {
			width: 700rpx;

			margin: 0 auto;
		}

		:nth-child(2) {
			margin: 0 auto;
			width: 700rpx;
			height: 700rpx;
		}

	}

	.under {
		overflow: hidden;
		height: 100rpx;
		width: 100%;
		background: #fff;
		z-index: 999;
		position: fixed;
		bottom: 0;

		image {
			width: 45rpx;
			height: 45rpx;
			margin-left: 65rpx;
			margin-top: 20rpx;
			margin-bottom: -20rpx;
		}

		text {
			margin-left: 65rpx;
			font-size: 22rpx;
			color: #3E3E3E;

		}

		.car {
			width: 128rpx;
			height: 80rpx;
			float: right;
			margin-top: -43rpx;
			margin-right: 24rpx;
			display: inline-block;
			border-radius: 14rpx;

			background: #e2e2e2;

			color: #8f8f94;
			text-align: center;
			line-height: 80rpx;
		}

		button {
			width: 238rpx;
			height: 80rpx;
			margin-top: -43rpx;
			float: right;
			margin-right: 38rpx;
			background: #354E44;
			line-height: 70rpx;
			border-radius: 14rpx;
			color: #fff;
		}
	}
</style>
